<template>
  <view class="goodRecommend">
    <!-- 骨架屏 -->
    <view class="product-list">
        <view class="item" v-for="(item,index) in productList" :key="index" @click="jumpProductDetail(item)">
          <ProductItem :item="item" />
        </view>
    </view>
    <view v-if="isShow" class="emptyCart-box flex-items-plus flex-column">
      <image
          class="img"
          :src="`${VUE_APP_STATIC_URL}ui-static/zwx-static/public/icon-empty.jpg`"
          mode="widthFix"
      ></image>
      <view class="text">没有更多内容了</view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, toRefs, watch} from 'vue';
import API from "@/config/api";
import {request} from "@/utils/request"
import { VUE_APP_STATIC_URL } from "@/config/api";
import ProductItem from "@/components/template/components/productItem.vue";
import funMixin from '@/components/canvasShow/config/mixin/funMixin'
const { jumpLink } = funMixin()
const props = defineProps({
  categoryid: {
    type: Number,
    default: 0
  }
})
const { categoryid } = toRefs(props)
const activeTab = ref(0)
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const productList = ref([])
const isShow = ref(false)

onMounted(()=>{
  productList.value = [{},{},{},{},{},{},{},{}]
  getData(1);
})

function getData(classifyLevel){
  console.log('加载了getData')
  if (total.value!=0&&productList.value.length>=total.value){
    console.log("加载完了")
    return
  }
  request(API.getProductsV2, {
    classifyId: categoryid.value,
    page:page.value,
    pageSize:pageSize.value,
    classifyLevel: classifyLevel || ''
  }, 'GET').then(res => {
    productList.value = [...productList.value,...res.data.list]
    productList.value = productList.value.filter(item=>JSON.stringify(item)!=='{}')
    total.value = res.data.total
    uni.hideLoading()
    if (productList.value.length ===0) {
      isShow.value = true
    }

  }).catch(err => {
    uni.hideLoading()
    throw Error(err)
  })
}
// 跳转到店铺主页
function jumpStore(item){
  uni.navigateTo({
    url: `/zwx_category_page1/store/index?storeId=${item.shopId}`
  })
}
// 跳转到商品详情
function jumpProductDetail(item){
  uni.navigateTo({
    url: '/zwx_category_page1/goodsModule/goodsDetails?shopId=' + item.shopId + '&productId=' + item.productId + '&skuId=' + item
        .skuId
  })
}

watch(()=>categoryid,(val)=>{
  isShow.value = false
  getData()
})

defineExpose({
  page,
  total,
  productList,
  getData
})
</script>

<style lang="scss" scoped>
.goodRecommend {
  padding: 20rpx 30rpx 0;
  .worth-buying-top{
    margin-bottom: 22rpx;
    .title{
      display: flex;
      align-items: flex-end;
      .h3{
        margin-right: 13rpx;
        .img{
          width: auto;
          height: 35rpx;
        }
      }
      .h4{
        .img{
          width: auto;
          height: 23rpx;
        }
      }
    }
  }
  .product-list{
    display: flex;
    flex-wrap: wrap;
    margin-left: -18rpx;
    .item{
      width: 336rpx;
      margin-left: 18rpx;
      &.banner{
        height: 534rpx;
        .banner-item{
          .img{
            width: 336rpx;
            height: 534rpx;
          }
        }
      }
    }
  }
  .emptyCart-box {
    margin-top: 70rpx;
    .img {
      width: 510rpx;
      margin: auto;
      display: block
    }
    .text{
      margin-top: 20rpx;
    }
  }
}

</style>
